﻿@using Kendo.Mvc.UI;
@using MvcApplication1.Controllers;
@{
    Layout = null;
    var entities = (IEnumerable<MyEntity>)ViewBag.Entities;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="../../SS/jquery.min.js" type="text/javascript"></script>
    <script src="../../SS/kendo.all.min.js" type="text/javascript"></script>  
    <script src="../../SS/kendo.grid.min.js" type="text/javascript"></script>
    <script src="../../SS/kendo.aspnetmvc.min.js" type="text/javascript"></script>
    <script src="../../SS/kendo.culture.en-US.min.js" type="text/javascript"></script>

    <link href="../../SS/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../SS/kendo.default.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        @(Html.Kendo()
        .Grid<MyEntity>()
        .Name("grid")
        .Columns(co =>
        {
            co.Bound(e => e.Id);
            co.Bound(e => e.FirstName);
            co.Bound(e => e.LastName);
            co.Bound(e => e.Category).EditorTemplateName("MyCategory");
            //MyCategory.cshtml should be present in Views/Shared/EditorTemplates
        })
        .DataSource(ds =>
            ds.Ajax()
            .Read(r => r.Action("GetEntities", "Home"))
            .Model(mo =>
            {
                mo.Id(e => e.Id);
                mo.Field(e => e.Id).Editable(false);
            }))
            .Sortable()
            .Scrollable(scr=>scr.Height("auto"))
                //Scrollable() is required, otherwise cell-width changes while editing
                //Height auto is given to remove unused space
            .Editable(editable => editable.Mode(GridEditMode.InCell))
        )
    </div>
</body>
</html>
